<template>
    <div class="leave-teacherleave">
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"教师姓名："}}</Col>
            <Col span="19">{{datas.teacher!=undefined ? datas.teacher.teacher_name.zh : ''}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"请假种类："}}</Col>
            <Col span="19">{{datas.teacher_leave_kinds[0].dictionary_name.zh}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"请假开始时间："}}</Col>
            <Col span="19">{{datas.start_time}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"请假结束时间："}}</Col>
            <Col span="19">{{datas.end_time}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"请假天数："}}</Col>
            <Col span="19">{{`${datas.leave_days}天`}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"是否调课："}}</Col>
            <Col span="19">{{datas.whether_class==1 ? "是": "否"}}</Col>
        </Row>
        <Row class="leave-teacherleave-rows">
            <Col span="5">{{"教师请假原因："}}</Col>
            <Col span="19">{{datas.teacher_leave_reason.zh}}</Col>
        </Row>

        <div class="detail-record">
            <p class="leave-teacherleave-rows">请假审核记录</p>
            <Table :columns="columns2" :data="datalist" height="300"></Table>
        </div>

        <div class="detail-record" v-if="iswhether" >
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="leave-teacherleave-rows">调课记录</p>
            <Table :columns="columns1" :data="whetherlist" height="300"></Table>
        </div>
    </div>
</template>

<script>
export default {
    props:['datas'],
    data () {
        return {
            spinShow:false,
            iswhether:false,
            whetherlist:[],
            datalist:[],
            columns1: [
                {
                    title: '请假开始时间',
                    render: (h, params) => {                      
                        return h('div', params.row.start_time);
                    }
                },
                {
                    title: '请假结束时间',
                    render: (h, params) => {                      
                        return h('div', params.row.end_time);
                    }
                },
                {
                    title: '调课安排',
                    render: (h, params) => {
                        let ss = `${params.row.date} ${params.row.week_id.dictionary_name.zh} ${params.row.class_type.name.zh} ${params.row.course_id.course_name.zh}`;                         
                        return h('div', ss);
                    }
                },
                {
                    title: '调课教师',
                    render: (h, params) => {
                        return h('div', params.row.to_teacher!=null?params.row.to_teacher.teacher_name.zh:'未调课');                            
                    }
                },
            ],
            columns2: [
                {
                    title: '审核人姓名',
                    render: (h, params) => {                         
                        return h('div', params.row.teacher!=null?params.row.teacher.teacher_name.zh:'');
                    }
                },
                {
                    title: '审核状态',
                    render: (h, params) => {
                        if(params.row.status=='0'){
                            return h('div', {
                                style:{
                                    color: '#007d7f',
                                }
                            }, '未审核');
                        }else if(params.row.status=='1'){
                            return h('div',{
                                style: {
                                color: '#1aad33',
                                },
                            }, '通过');
                        }else if(params.row.status=='2'){
                            return h('div',{
                                style: {
                                color: '#f00',
                                },
                            }, '未通过');
                        }else{
                            return h('div',{
                                style: {
                                color: '#FFC107',
                                },
                            }, '同意并向上级审批');
                        }
                    }
                },
                {
                    title: '时间',
                    render: (h, params) => {
                        return h('div', params.row.created_at);
                    }
                },
            ],
        }
    },
    methods: {
        // 加载
        load() {     
            this.spinShow = true 
            this.datalist = this.datas.examine 
            if(this.datas.whether_class ==1){      
                this.iswhether = true   
                this.$http.get(`api/leave/v1/teacher_leave/my_course/${this.datas.teacher_leave_id}`).then((response) => {
                    this.whetherlist = response.data
                    this.spinShow = false 
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            }else{
                this.iswhether = false     
                this.spinShow = false                
            }
        },
    },
    mounted(){  
        this.load();          
    },
}
</script>
<style lang="less">
.leave-teacherleave{
    &-rows{
        padding: 8px 0 2px 0;
        font-size: 14px;
    }
    .detail-record{
        padding: 10px 0;
        position: relative;
    }
}
</style>
